<template>
  <div class="loginWarp">
    <div class="loginDiv">
      <var-row>
        <var-col class="h-full" :span="12">
          <var-image :src="bgImg" />
        </var-col>
        <var-col class="h-full" :span="12">
          <div class="p-2 w-full h-full bg-light-100 shadow-2xl">
            <h2
              class="my-2 text-sm subpixel-antialiased font-bold text-gray-500"
            >
              欢迎登录
            </h2>
            <var-form class="px-2 text-left" ref="form">
              <var-space direction="column" class="mt-4" :size="[14, 0]">
                <var-input
                  :hint="false"
                  :line="false"
                  placeholder="请输入手机号"
                  v-model="formData.phone"
                  focus-color="#38d39f"
                  blur-color="#d9d9d9"
                >
                  <template #prepend-icon>
                    <var-icon
                      class="mr-2"
                      color="#d9d9d9"
                      name="account-circle-outline"
                    />
                  </template>
                </var-input>
                <var-input
                  :hint="false"
                  :line="false"
                  type="password"
                  placeholder="请输入密码"
                  v-model="formData.password"
                  focus-color="#38d39f"
                  blur-color="#d9d9d9"
                >
                  <template #prepend-icon>
                    <var-icon class="mr-2" color="#d9d9d9" name="minus-box" />
                  </template>
                </var-input>
                <var-space justify="align" size="small" class="text">
                  <var-checkbox v-model="formDataLike"></var-checkbox>
                  我已阅读并同意<var-link type="primary" to="/Protocol"> 《服务协议》</var-link>和<var-link type="primary" to="/Privacy">《隐私政策》</var-link>
                </var-space>
                  
                <var-button
                  class="w-full"
                  block
                  type="success"
                  @click="handleClick"
                  >登 陆</var-button
                >
              </var-space>
            </var-form>
            <var-button class="btntext" text type="primary"  @click="handleGo">还没账号？赶紧去注册</var-button>
          </div>
        </var-col>
      </var-row>
    </div>
  </div>
  
</template>

<script setup>
import bgImg from "@/assets/images/bg.svg";
import { reactive, onMounted,ref } from "vue";
import { postData } from "@/utils/api";
import { loginStore } from "@/store/user";
import { useRouter } from "vue-router";
import socket from "@/utils/socket.js";
const MRouter = useRouter();
const store = loginStore();
const formDataLike = ref(false)
const formData = reactive({
  phone: "",
  password: "",
});
const oBshow = ref(false)
let user = "";
if (store.getUserInfo?.userInfo == undefined) {
  user = store.getUserInfo;
} else {
  user = JSON.parse(store.getUserInfo?.userInfo);
}

const actions = {
  confirm: () => formDataLike.value = true,
  cancel: () => Snackbar['warning']("请先勾选同意再登录"),
}
onMounted(() => {
  socket.on("connect", () => {
    console.log("socketio-connect");
  });
  if(!user){
    oBshow.value = true
  }
});
const handleClick = async () => {

  if(formDataLike.value != ''){
  postData("student/login", { ...formData }).then((res) => {
    const { data } = res;
    Snackbar['warning'](data.msg)
    store.addUser(data.data);
    const user = JSON.parse(data.data);
    store.changInclassRoom(true);
    socket.emit(
      "join",
      Object.assign(
        {},
        {
          roomId: user.classRoomId,
          userId: user.id,
          userName: user.name,
        }
      )
    );

    MRouter.push({
      path: "/",
    });
  }); 
  }else{
    //Snackbar['warning']("请先勾选同意再登录")
    actions[await Dialog({
      title:'',
      message:"登录前请您先阅读并同意《服务协议》和《隐私政策》",
      confirmButtonText:"同意",
      cancelButtonText:"不同意",
      confirmButtonTextColor:"#ff8800",
      cancelButtonTextColor:"#666"
    })]()
  };
};
const handleGo = ()=>{
  MRouter.push({
      path: "/Register",
  });
}
</script>

<style scoped>
.loginWarp {
  background: url("@/assets/images/wave.png") no-repeat;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginDiv {
  width: 75%;
  height: 80vh;
}

.loginDiv .var-row {
  /* h-full flex justify-center items-center */
  height: 100%;
  display: flex;
  display: flex;
  align-items: center;
}
:deep(.var-checkbox__text){
  font-size: 4px;
  line-height: 12px;
  color: #666;
}
.text{
  font-size: 4px;
  line-height: 12px;
  color: #666;
}
:deep(.var-checkbox__action){
  font-size: 4px;
  line-height: 12px;
  color: #666;
  padding: 0;
}
:deep(.var-link){
  font-size: 4px;
}
:deep(.var-checkbox-group__wrap){
  height: 6vw;
}
.btntext{
  font-size: 6px;
}

</style>
